<template>
	<view class="container" @click="handleContainerClick">

		<!-- 新· 识别出来的法语与评分如下   开始 -->
		<view class="fsNum">
			<!-- 识别出来的 单词及 评分 -->
			<!-- {{dataResult}}=== -->
			{{((confidence===0.00||confidence===null)?'':confidence<60&&confidence>0.00)?'分数:'+confidence :'分数:'+confidence }}
		</view>

		<!-- 左上角显示循环信息 -->
		<view class="loop-info">
			{{currentLoop}}/{{totalLoops}}
		</view>
		<!-- 循环渲染每个游戏项 -->
		<view v-for="(item, index) in gameList" :key="index" v-if="currentLoop - 1 === index">
			<view class="game-item">
				<!-- 左边图片区域 -->
				<view class="left-section">
					<image :src="item.image" mode="aspectFit"></image>
				</view>
				<!-- 右边功能区域 -->
				<view class="right">
					<h3>{{item.fyText}}</h3>
					<view class="right-section">
						<!-- 播放喇叭按钮 -->
						<view class="play-button" @click.stop="playAudio(item)">
							<image src="https://www.afbeijing.net/static_resources/assets/lb.png" mode="aspectFill">
							</image>
						</view>
						<!-- 语音输入按钮 -->
						<view class="record-button" @click.stop="toggleRecording(item)">
							<image
								:src="isRecording ? 'https://www.afbeijing.net/static_resources/assets/ly.png' : 'https://www.afbeijing.net/static_resources/assets/ly-ing.png'"
								mode="aspectFill"></image>
						</view>
						<view v-if="isRecording" class="recording-indicator">
							<view :animation="animationData" class="dot"></view>
							<view :animation="animationData" class="dot" style="animation-delay: 200ms;"></view>
							<view :animation="animationData" class="dot" style="animation-delay: 400ms;"></view>
						</view>
					</view>
					<!-- 录音状态提示 -->
					<view v-if="recordingStatus" class="" @click.stop="stopLY()">
						<view class="recording-status">
							<view v-if="recordingStatus!=='分析中...'">
								{{recordingStatus}}
							</view>
							<view v-if="recordingStatus==='分析中...'" class="recording-status-wz">
								{{recordingStatus}}
							</view>
						</view>
						<view v-if="recordingStatus!=='分析中...'" class="recording-status2">
							点击屏幕取消录音
						</view>
						<view v-if="recordingStatus==='分析中...'" class="recording-status3">
							<image src="https://www.afbeijing.net/static_resources/assets/aijiazai.gif"
								mode="aspectFill" style="height: 170rpx;width: 170rpx;"></image>
						</view>
					</view>
					<!-- 权限提示 -->
					<view v-if="showPermissionTip" class="permission-tip">
						<text class="permission-text">需要录音权限才能进行练习</text>
						<u-button type="primary" @click="openAppSettings">去设置</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="loop-bottom">
			<u-button type="warning" v-if="currentLoop > 1" @click="prevItem" text="上一个"></u-button>
			<u-button type="warning" v-if="currentLoop < totalLoops" style="margin-left: 10px;"
				@click="nextItem" text="下一个"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		threeSelectGame,
		threeVerify,
		threecompleteGame
	} from "../../api/index";
	import config from "@/src/tools/config.js";

	// 新引入的插件 开始
	const getToken = require("@/src/utils/token").getToken;
	const SpeechTranscription = require("@/src/utils/st");
	const sleep = require("@/src/utils/util").sleep;
	import calculateFrenchSimilarity from "@/src/utils/nlp-utils.js";

	import {
		calculateScore
	} from '@/src/tools/frenchCompare.js';
	// 新引入的插件 结束

	export default {
		data() {
			return {
				gameId: null,
				currentLoop: 1, // 当前循环数
				totalLoops: 0, // 总循环数
				gameList: [],
				isRecording: false,
				audioContext: null,
				recorderManager: null,
				clsCrsId: null,
				crsId: null,
				clsId: null,
				animationData: {},
				recordingStatus: '', // 录音状态提示
				recordingTimer: null, // 录音计时器
				lastRecordResult: null, // 上次录音结果
				isProcessing: false, // 是否分析中
				hasRecordPermission: false, // 录音权限状态
				isFirstTimeRecord: true, // 是否首次录音
				recordErrorCount: 0, // 录音错误次数
				lastRecordError: null, // 上次录音错误信息
				showPermissionTip: false, // 是否显示权限提示
				deniedPermissionCount: 0, // 拒绝权限次数

				// 新· 新增参数=====开始
				akid: 'LTAI5t8wy2ykHQYE1UjvEmT8',
				akkey: '2ZcGnTw40mlXcfS8I3mITsz1o17eLA',
				appkey: 'm0EYYUUMZnTG3RcL',
				token: null,
				stStart: false,
				stResult: "未开始识别",
				results: [], // 所有比对结果
				dataResult: null,
				confidence: 0.00,
				fyText: null,
				isRecorded: [], // 新增：记录每一页是否成功录音
				// 新增参数=====结束
			};
		},
		onLoad: async function(options) {
			this.crsId = options.crsId;
			this.clsId = options.clsId;
			this.clsCrsId = Number(options.id);
			this.selectGameList();
			this.initAudioContext();
			this.initRecorderManager();
			this.checkRecordPermission(); // 检查录音权限

			// 新· =====初始化前端语音识别 开始===== \\
			wx.getRecorderManager().onFrameRecorded((res) => {
				if (res.isLastFrame) {
					console.log("record done")
				}
				if (this.st && this.stStart) {
					console.log("send " + res.frameBuffer.byteLength)
					this.st.sendAudio(res.frameBuffer)
				}
			})
			wx.getRecorderManager().onStart(() => {
				console.log("start recording...")
			})
			wx.getRecorderManager().onStop((res) => {
				console.log("stop recording...")
				if (res.tempFilePath) {
					wx.removeSavedFile({
						filePath: res.tempFilePath
					})
				}
			})
			wx.getRecorderManager().onError((res) => {
				// this.checkRecordPermission(); // 检查录音权限
				console.log("recording failed:" + JSON.stringify(res))
			})

			try {
				this.token = await getToken('LTAI5t8wy2ykHQYE1UjvEmT8',
					'2ZcGnTw40mlXcfS8I3mITsz1o17eLA')
			} catch (e) {
				console.log("error on get token:", JSON.stringify(e))
				return
			}
			const app = getApp();
			// 新引入的插件 开始
			let st = new SpeechTranscription({
				url: app.globalData.URL,
				appkey: 'm0EYYUUMZnTG3RcL',
				token: this.token
			})
			
			st.on("started", (msg) => {
				console.log("Client recv started")
				this.stResult = msg
			})

			st.on("changed", (msg) => {
				console.log("Client recv changed:", msg)
				this.stResult = msg
			})

			st.on("completed", (msg) => {
				console.log("Client recv completed:", msg)
				this.stResult = msg
			})

			st.on("begin", (msg) => {
				console.log("Client recv sentenceBegin:", msg)
				this.stResult = msg
			})
			// 这里是完成录音后  获取实时语音识别出来的文本句子
			st.on("end", (msg) => {
				console.log("=====1 all Client recv sentenceEnd=====:", msg)
				console.log("=====2 header Client recv sentenceEnd=====:", JSON.parse(msg).header)
				console.log("=====3 payload Client recv sentenceEnd=====:", JSON.parse(msg).payload)
				this.stResult = msg
				this.dataResult = JSON.parse(msg).payload.result
				// this.calculateSimilarity(JSON.parse(msg).payload.result, this.fyText)
				// this.confidence = JSON.parse(msg).payload.confidence
			})

			st.on("closed", (msg) => {
				console.log("***********Client recv closed***********", msg)
			})

			st.on("failed", (msg) => {
				console.log("Client recv failed:", msg)
				this.stResult = msg
			})

			this.st = st
			// 新· =====初始化前端语音识别 结束===== \\
		},
		onUnload() {
			// 页面卸载时销毁音频上下文和录音管理器
			this.destroyAudioContext();
			if (this.recorderManager) {
				this.recorderManager = null;
			}
			// 清除计时器
			if (this.recordingTimer) {
				clearInterval(this.recordingTimer);
				this.recordingTimer = null;
			}

			// 新· 这里卸载 实时语音的内容
			console.log("st onUnload");
			this.stStart = false;
			wx.getRecorderManager().stop();
			if (this.st) {
				this.st.shutdown();
			} else {
				console.log("st is null");
			}
		},
		methods: {
			// =============以下为新增的方法============= \\

			// 新· 新增的开始录音 按钮事件
			onStStart: async function() {
				this.audioContext.stop();
				if (!this.st) {
					console.log("st is null")
					return
				}
				if (this.stStart) {
					console.log("st is started!")
					return
				}
				let st = this.st
				// 配置参数
				let params = st.defaultStartParams();
				params.max_sentence_silence = 2000;
				params.enable_inverse_text_normalization = false;
				try {
					await st.start(params, true, 6000)
					this.stStart = true
					this.isRecording = true;
					this.recordingStatus = '录音中...';
					this.recordErrorCount = 0; // 重置错误计数
					// 标记不是首次录音
					if (this.isFirstTimeRecord) {
						this.isFirstTimeRecord = false;
					}

					// 设置录音时长计时器
					let seconds = 0;
					this.recordingTimer = setInterval(() => {
						seconds++;
						if (seconds >= 30) { // 30秒自动停止
							this.toggleRecording();
						} else {
							this.recordingStatus = `录音中...${seconds}s`;
						}
					}, 1000);
				} catch (e) {
					console.log("start failed:" + e)
					return
				}
				wx.getRecorderManager().start({
					duration: 600000,
					numberOfChannels: 1,
					sampleRate: 16000,
					format: "PCM",
					frameSize: 4,
					vocabularyId: "9b7ab922499844cf917c3050799d11ce",
					languageHints: ["zh"],
					
				})
			},
			// 新· 新增的结束录音 按钮事件
			onStStop: async function() {
				wx.getRecorderManager().stop()
				await sleep(500)
				if (this.stStart && this.st) {
					try {
						console.log("prepare close st")
						await this.st.close()
						this.stStart = false
						this.isRecording = false
						this.recordingStatus = '';
						// 清除计时器
						if (this.recordingTimer) {
							clearInterval(this.recordingTimer);
							this.recordingTimer = null;
						}
						this.calculateSimilarity(this.dataResult, this.fyText)
					} catch (e) {
						console.log("close st failed:" + e)
					}
				}
			},
			// 新· 计算与所有参考句子的相似度
			calculateSimilarity(e, fyText) {
				console.log('计算与所有参考句子的相似度:', fyText)
				this.errorMessage = '';
				// this.results = [];
				try {
					const comparer = new calculateFrenchSimilarity();
					const score = comparer.compare(fyText, e);
					this.confidence = score.toFixed(2)
					console.log('====新对比函数评分====', score)
					if (this.confidence <= 0.00) {
						this.showResultToast('请重新录音', 'error');
						// this.fyText = null
					} else { 
						this.isRecorded[this.currentLoop - 1] = true;
					}
					// if (this.confidence <= 0) {
					// 	this.showResultToast('请重新录音', 'error');
					// 	// this.fyText = null
					// } else if (this.confidence < 50) {
					// 	this.showResultToast("再试一下吧", 'warning');
					// 	this.isRecorded[this.currentLoop - 1] = true;
					// 	// this.fyText = null
					// } else if (this.confidence < 70) {
					// 	this.showResultToast("还不错", 'success');
					// 	this.isRecorded[this.currentLoop - 1] = true;
					// 	// this.fyText = null
					// } else if (this.confidence <= 100 || this.confidence > 100) {
					// 	this.showResultToast("非常棒", 'success');
					// 	// 标记当前页已成功录音
					// 	this.isRecorded[this.currentLoop - 1] = true;
					// 	// this.fyText = null
					// }
					// 检查是否完成所有题目
					if ((this.currentLoop === this.totalLoops) && this.confidence >= 60) {
						this.completeGame();
						// this.fyText = null
					}
				} catch (error) {
					console.error('相似度计算出错:', error);
					this.errorMessage = '计算相似度时出错，请检查输入';
					// this.fyText = null
				}
			},
			// 显示结果提示
			showResultToast(title, icon) {
				uni.showToast({
					title: title,
					icon: icon,
					duration: 2000
				});
			},
			// 完成游戏
			completeGame(e) {
				var jsonData = {
					"clsCrsId": this.clsCrsId,
					"clsId": this.clsId,
					"crsId": this.crsId,
					gameId: this.gameId,
				};
				threecompleteGame(jsonData).then(response => {
					console.log(response);
					if (response.code === 0) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '恭喜你完成了！',
							success: function(res) {
								if (res.confirm) {
									// 跳转积分页
									uni.redirectTo({
										url: '/src/views/pageStudy/common/huodejifen/index?showButton=false'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: '保存结果失败，请重试',
							icon: 'none'
						});
					}
				}).catch(error => {
					// console.error('threecompleteGame error:', error);
					uni.showToast({
						title: '保存结果失败，请重试',
						icon: 'none'
					});
				});
			},
			// =============以上为新增的方法============= \\

			// 检查录音权限
			checkRecordPermission() {
				uni.getSetting({
					success: (res) => {
						this.hasRecordPermission = !!res.authSetting['scope.record'];
						console.log('录音权限状态:', this.hasRecordPermission);
					},
					fail: (err) => {
						console.error('获取权限设置失败:', err);
					}
				});
			},

			// 初始化音频上下文
			initAudioContext() {
				// 创建音频上下文
				this.audioContext = uni.createInnerAudioContext();
				// 监听音频播放错误事件
				this.audioContext.onError((err) => {
					console.error('音频播放出错:', err);
					// uni.showToast({
					// 	title: '音频播放出错，请稍后重试',
					// 	icon: 'none'
					// });
				});
				// 监听音频播放结束事件
				this.audioContext.onEnded(() => {
					console.log('音频播放结束');
				});
			},

			// 销毁音频上下文
			destroyAudioContext() {
				if (this.audioContext) {
					this.audioContext.stop();
					this.audioContext.destroy();
					this.audioContext = null;
				}
			},

			// 初始化录音管理器
			initRecorderManager() {
				// 创建录音管理器
				this.recorderManager = uni.getRecorderManager();
				// 监听录音开始事件
				this.recorderManager.onStart(() => {
					console.log('录音开始');
					this.isRecording = true;
					this.recordingStatus = '录音中...';
					this.recordErrorCount = 0; // 重置错误计数
					// 标记不是首次录音
					if (this.isFirstTimeRecord) {
						this.isFirstTimeRecord = false;
					}

					// 创建录音动画
					const animation = uni.createAnimation({
						duration: 1000,
						timingFunction: 'ease',
					});

					animation.opacity(0).step();
					animation.opacity(1).step({
						duration: 500
					});
					animation.opacity(0).step({
						duration: 500
					});

					this.animationData = animation.export();

					// 设置录音时长计时器
					let seconds = 0;
					this.recordingTimer = setInterval(() => {
						seconds++;
						if (seconds >= 30) { // 30秒自动停止
							this.toggleRecording();
						} else {
							this.recordingStatus = `录音中...${seconds}s`;
						}
					}, 1000);
				});

				// 监听录音停止事件
				this.recorderManager.onStop((res) => {
					console.log('录音停止', res);
					this.isRecording = false;
					this.recordingStatus = '';

					// 清除计时器
					if (this.recordingTimer) {
						clearInterval(this.recordingTimer);
						this.recordingTimer = null;
					}

					// 处理录音结果
					if (res.tempFilePath) {
						this.lastRecordResult = res;
						this.processRecordingResult(res);
					} else {
						uni.showToast({
							title: '录音失败，请重试',
							icon: 'none'
						});
					}
				});

				// 监听录音错误事件
				this.recorderManager.onError((err) => {
					console.error('录音出错:', JSON.stringify(err));
					this.lastRecordError = err;
					this.isRecording = false;
					this.recordingStatus = '';
					this.recordErrorCount++;

					// 清除计时器
					if (this.recordingTimer) {
						clearInterval(this.recordingTimer);
						this.recordingTimer = null;
					}

					// 显示更具体的错误信息
					let errorMsg = '录音出错，请稍后重试';
					if (err.errMsg) {
						errorMsg += `: ${err.errMsg}`;
					}

					// 如果多次录音失败，提供更多帮助
					if (this.recordErrorCount >= 3) {
						errorMsg += '\n多次录音失败，请检查设备麦克风是否正常';
					}

					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000
					});
				});

				// 监听录音音量变化事件
				this.recorderManager.onFrameRecorded((res) => {
					// 可以用于实时显示音量
					console.log('录音音量变化', res);
				});
			},

			// 上一个游戏项
			prevItem() {
				if (this.currentLoop > 1) {
					this.currentLoop--;
					this.canGoNext = this.currentLoop < this.totalLoops;
				}
			},

			// 下一个游戏项
			nextItem() {
				if (this.currentLoop < this.totalLoops) {
					if (!this.isRecorded[this.currentLoop - 1]) {
						uni.showToast({
							title: '请完成当前环节',
							icon: 'none'
						});
						return;
					}
					this.currentLoop++;
					this.confidence = 0.00;
					this.onStStop();
				}
			},

			// 查询游戏列表
			selectGameList() {
				var jsonData = {
					clsCrsId: this.clsCrsId,
					crsId: this.crsId,
					pageNum: 1,
				};
				threeSelectGame(jsonData).then(response => {
					console.log(response);
					if (response.code === 0) {
						this.gameList = response.data.list;
						this.totalLoops = this.gameList.length;
						// 初始化isRecorded数组
						this.isRecorded = new Array(this.totalLoops).fill(false);
					} else {
						uni.$u.toast(response.msg);
					}
				}).catch(errors => {
					console.error('selectGameList error:', errors);
					uni.$u.toast('获取游戏列表失败');
				});
			},

			// 播放音频
			playAudio(item) {
				if (!item.audio) {
					uni.showToast({
						title: '音频资源不存在',
						icon: 'none'
					});
					return;
				}

				// 如果正在录音，先停止录音
				if (this.isRecording) {
					this.toggleRecording();
				}

				// 播放标准音频
				this.audioContext.src = item.audio;
				this.audioContext.play();
			},
			stopLY() {
				// 如果正在录音，先停止录音
				if (this.isRecording) {
					this.toggleRecording();
				}
			},
			// 开始/停止录音
			toggleRecording(item) {
				// 如果传入了item，保存当前游戏ID
				if (item) {
					this.gameId = item.gameId;
					console.log('开始/停止录音:', item.fyText)
					this.fyText = item.answerFyText;
				}

				// 如果没有权限，先请求权限
				if (!this.hasRecordPermission) {
					this.requestRecordPermission();
					return;
				}

				if (!this.isRecording) {
					// 如果正在处理上次录音结果，不允许再次录音
					if (this.isProcessing) {
						uni.showToast({
							title: '正在处理上一次录音，请稍候',
							icon: 'none'
						});
						return;
					}
					this.onStStart()
				} else {
					// 停止录音
					this.onStStop()
				}
			},

			// 请求录音权限
			requestRecordPermission() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.record']) {
							// 未授予录音权限，请求权限
							uni.authorize({
								scope: 'scope.record',
								success: () => {
									// 用户授权成功
									this.hasRecordPermission = true;
									this.deniedPermissionCount = 0;
									this.showPermissionTip = false;
									uni.showToast({
										title: '权限已获取，可以开始录音',
										icon: 'none'
									});
								},
								fail: (err) => {
									// 用户拒绝授权
									this.hasRecordPermission = false;
									this.deniedPermissionCount++;

									// 首次拒绝，显示提示
									if (this.deniedPermissionCount === 1) {
										uni.showModal({
											title: '提示',
											content: '需要录音权限才能进行练习',
											confirmText: '去设置',
											cancelText: '取消',
											success: (res) => {
												if (res.confirm) {
													this.openAppSettings();
												}
											}
										});
									} else {
										// 多次拒绝，显示持久提示
										this.showPermissionTip = true;
									}
								}
							});
						}
					},
					fail: (err) => {
						console.error('获取权限设置失败:', err);
						uni.showToast({
							title: '获取权限信息失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			// 打开应用设置页面
			openAppSettings() {
				uni.openSetting({
					success: (res) => {
						// 检查权限是否已授予
						this.hasRecordPermission = !!res.authSetting['scope.record'];
						if (this.hasRecordPermission) {
							this.showPermissionTip = false;
							uni.showToast({
								title: '权限已获取，可以开始录音',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '权限未授予，无法录音',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('打开设置页面失败:', err);
						uni.showToast({
							title: '无法打开设置页面',
							icon: 'none'
						});
					}
				});
			},

			// 处理录音结果
			processRecordingResult(file) {
				this.isProcessing = true;
				this.recordingStatus = '分析中...';
				uni.uploadFile({
					// 这里需要补充上传文件的相关配置
				});
			},

			// 处理容器点击事件
			handleContainerClick(e) {
				// 只有在录音状态下点击屏幕才触发停止录音
				if (this.isRecording) {
					this.toggleRecording();
				}
			}
		}
	};
</script>
<style>
	page {
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	.fsNum {
		font-size: 18px;
		color: #f9a803;
		top: 35rpx;
		/* position: relative; */
		position: absolute;
	}

	.recording-status {
		width: 100%;
		height: 105vh;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		/* opacity: 0.3; */
		z-index: 99999;
		left: 0;
		right: 0;
		top: -15px;
		font-size: 24rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		color: #f9a803 !important;

	}

	.recording-status-wz {
		margin-top: -80rpx;
		font-size: 24rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: #f9a803 !important;
	}

	.recording-status2 {
		width: 100%;
		height: 105vh;
		position: fixed;
		z-index: 99999;
		left: 0;
		right: 0;
		top: 25px;
		font-size: 18rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		color: #ffffff !important;
	}

	.recording-status3 {
		position: fixed;
		z-index: 99999;
		left: 0;
		right: 0;
		top: 110rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	page {
		overflow: hidden;
	}

	::v-deep .u-button--warning {
		margin-right: 15rpx;
	}

	.game-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.right {
		display: flex;
		flex-direction: column;
		width: 60%;
		height: 300rpx;
		align-items: center;
		position: relative;
	}

	.recording-indicator {
		position: absolute;
		right: 32%;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		background-color: #666;
		border-radius: 50%;
		margin: 0 2px;
	}

	.right h3 {
		text-align: center;
		font-size: 30rpx;
		height: 85rpx;
		word-break: break-all;
		margin-bottom: 20rpx;
	}

	.container {
		padding: 40rpx;
		position: relative;
	}

	.left-section {
		width: 40%;
		background: #fff;
		height: 220rpx;
		overflow: hidden;
		margin-bottom: 35rpx;
		border-radius: 8px;
	}

	.left-section image {
		width: 100%;
		height: 100%;
	}

	.right-section {
		width: 60%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.play-button,
	.record-button {
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		border-radius: 50%;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.play-button image,
	.record-button image {
		width: 100%;
		height: 100%;
	}

	.loop-info {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		font-size: 16px;
		color: #333;
	}

	.loop-bottom {
		position: absolute;
		bottom: 100rpx;
		right: 120rpx;
		width: 30%;
		font-size: 16px;
		color: #333;
		display: flex;
	}

	.recording-status {
		/* margin-top: 15rpx; */
		/* font-size: 14px; */
		/* color: #666; */
	}

	.permission-tip {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(255, 220, 220, 0.8);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
	}

	.permission-text {
		color: #ff4500;
		margin-bottom: 10rpx;
		text-align: center;
	}
</style>